<!--
 * @Author: anxia.ack anchenkai@come-future.com
 * @Date: 2025-03-22 16:10:55
 * @LastEditors: anxia.ack anchenkai@come-future.com
 * @LastEditTime: 2025-05-07 21:57:02
 * @FilePath: /free-learning-front/src/views/CoursesView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="courses">
    <AnimateOnScroll animation="fade-up" :threshold="0.2">
      <h1>课程中心</h1>
    </AnimateOnScroll>

    <!-- 课程分类导航 -->
    <div class="course-categories">
      <div class="category-list">
        <div
          v-for="category in courseTypes"
          :key="category.id"
          class="category-item"
          :class="{ active: isCategoryActive(category.id) }"
          @click="handleCategoryClick(category.id)"
        >
          {{ category.name }}
        </div>
      </div>

      <!-- 子分类列表 -->
      <div class="subcategory-list" v-if="currentSubcategories.length > 0">
        <div
          v-for="subcategory in currentSubcategories"
          :key="subcategory.id"
          class="subcategory-item"
          :class="{ active: selectedCategoryId === subcategory.id }"
          @click="handleSubcategoryClick(subcategory.id)"
        >
          {{ subcategory.name }}
        </div>
      </div>
    </div>

    <!-- 骨架屏 -->
    <div v-if="loading" class="course-grid">
      <div v-for="i in 6" :key="i" class="course-card skeleton">
        <div class="skeleton-img"></div>
        <div class="skeleton-title"></div>
        <div class="skeleton-desc"></div>
        <div class="course-info">
          <div class="skeleton-info"></div>
          <div class="skeleton-info"></div>
        </div>
        <div class="skeleton-button"></div>
      </div>
    </div>

    <div v-else-if="courses.length > 0" class="course-grid">
      <AnimateOnScroll
        v-for="(course, index) in courses"
        :key="index"
        animation="zoom-in"
        :threshold="0.2"
        :delay="index * 0.1"
        class="course-item"
      >
        <CourseCard :course="course" />
      </AnimateOnScroll>
    </div>
    <div v-else class="empty-state">
      <el-empty description="暂无相关课程" :image-size="200">
        <template #description>
          <p>当前分类下暂无课程，请尝试选择其他分类</p>
        </template>
        <el-button type="primary" @click="handleCategoryClick()"
          >查看全部课程</el-button
        >
      </el-empty>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import AnimateOnScroll from "../components/AnimateOnScroll.vue";
import { requestCoursePublishList, type CourseInfoVO } from "@/api/course";
import { useRoute, useRouter } from "vue-router";
import { useCourseTypeStore } from "@/store/modules/courseType";
import type { CourseCategoryListVO } from "@/api/courseType";
import { ElEmpty, ElButton } from "element-plus";
import CourseCard from "@/components/CourseCard.vue";
const route = useRoute();
const router = useRouter();
const courses = ref<CourseInfoVO[]>([]);
const selectedCategoryId = ref<number | null>(null);
const selectedParentId = ref<number | null>(null);
const loading = ref(true);

// 使用课程分类 store
const courseTypeStore = useCourseTypeStore();
const courseTypes = computed(() => courseTypeStore.courseTypeList);

// 计算当前选中的子分类
const currentSubcategories = computed(() => {
  const category = courseTypes.value.find(
    (c: CourseCategoryListVO) =>
      c.id === selectedParentId.value ||
      c.id == parseInt(route.query.typeId as string)
  );
  return category?.children || [];
});

// 判断分类是否处于选中状态
const isCategoryActive = (categoryId: number) => {
  return (
    selectedCategoryId.value === categoryId ||
    selectedParentId.value === categoryId ||
    route.query.typeId === categoryId.toString()
  );
};

// 获取课程列表
const getCourseList = async (typeId?: number) => {
  try {
    loading.value = true;
    const res = await requestCoursePublishList(typeId?.toString());
    courses.value = res;
  } catch (error) {
    console.error("获取课程列表失败:", error);
  } finally {
    loading.value = false;
  }
};

// 处理父分类点击
const handleCategoryClick = (categoryId?: number) => {
  if (!categoryId) {
    selectedParentId.value = null;
    selectedCategoryId.value = null;
    router.push({
      query: {},
    }); // 获取课程列表
    getCourseList();
    return;
  }
  // 查找点击的分类
  const category = courseTypes.value.find(
    (c: CourseCategoryListVO) => c.id === categoryId
  );

  if (category) {
    // 如果点击的是父分类
    if (category.children && category.children.length > 0) {
      selectedParentId.value = categoryId;
      selectedCategoryId.value = null; // 清除子分类选中状态

      // 获取课程列表
      getCourseList(categoryId);

      // 更新 URL 参数
      router.push({
        query: { ...route.query, typeId: categoryId.toString() },
      });
    }
  }
};

// 处理子分类点击
const handleSubcategoryClick = (subcategoryId: number) => {
  // 设置选中的子分类
  selectedCategoryId.value = subcategoryId;

  // 查找父分类
  const parentCategory = courseTypes.value.find(
    (c: CourseCategoryListVO) =>
      c.children && c.children.some((child) => child.id === subcategoryId)
  );

  if (parentCategory) {
    selectedParentId.value = parentCategory.id;
  }

  // 获取课程列表
  getCourseList(subcategoryId);

  // 更新 URL 参数
  router.push({
    query: { ...route.query, typeId: subcategoryId.toString() },
  });
};

// 初始化
onMounted(async () => {
  // 确保课程分类数据已加载
  if (courseTypes.value.length === 0) {
    await courseTypeStore.getCourseTypeList();
  }

  // 从 URL 参数中获取分类 ID
  const typeId = route.query.typeId
    ? parseInt(route.query.typeId as string)
    : null;
  if (typeId) {
    // 查找分类
    const category = courseTypes.value.find(
      (c: CourseCategoryListVO) => c.id === typeId
    );
    if (category) {
      // 如果点击的是父分类
      if (category.children && category.children.length > 0) {
        selectedParentId.value = typeId;
        selectedCategoryId.value = null;
      } else {
        // 如果点击的是子分类
        selectedCategoryId.value = typeId;
        // 查找父分类
        const parentCategory = courseTypes.value.find(
          (c: CourseCategoryListVO) =>
            c.children && c.children.some((child) => child.id === typeId)
        );
        if (parentCategory) {
          selectedParentId.value = parentCategory.id;
        }
      }
    }
    await getCourseList(typeId);
  } else {
    // 如果没有选择分类，获取所有课程
    await getCourseList();
  }
});
</script>

<style scoped>
.courses {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  margin-bottom: 20px;
  color: #333;
}

/* 课程分类样式 */
.course-categories {
  margin-bottom: 30px;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.category-item {
  padding: 8px 15px;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e0e0e0;
}

.category-item:hover {
  background-color: #f0f0f0;
}

.category-item.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.subcategory-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid #e0e0e0;
}

.subcategory-item {
  padding: 6px 12px;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e0e0e0;
  font-size: 14px;
}

.subcategory-item:hover {
  background-color: #f0f0f0;
}

.subcategory-item.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 30px;
}

.course-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-card p {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.course-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.course-card h3 {
  padding: 15px 15px 10px;
  font-size: 18px;
  color: #333;
}

.course-card p {
  padding: 0 15px 15px;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.course-info {
  display: flex;
  justify-content: space-between;
  padding: 0 15px 15px;
  color: #777;
  font-size: 13px;
}

.btn-view {
  display: block;
  text-align: center;
  margin: 0 15px 15px;
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.btn-view:hover {
  background-color: #0056b3;
}

.no-courses {
  text-align: center;
  color: #666;
  font-size: 24px;
  margin-top: 50px;
}

/* 骨架屏样式 */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.skeleton {
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
}

.skeleton-img {
  width: 100%;
  height: 160px;
  background-color: #e0e0e0;
}

.skeleton-title {
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 4px;
  margin: 15px 15px 10px;
  width: 80%;
}

.skeleton-desc {
  height: 16px;
  background-color: #e0e0e0;
  border-radius: 4px;
  margin: 0 15px 15px;
  width: 90%;
}

.skeleton-info {
  height: 14px;
  background-color: #e0e0e0;
  border-radius: 4px;
  width: 40%;
}

.skeleton-button {
  height: 36px;
  background-color: #e0e0e0;
  border-radius: 4px;
  margin: 0 15px 15px;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}

.empty-state :deep(.el-empty__description p) {
  color: #909399;
  margin: 10px 0;
}
</style>
